<template>
  <div class="edit-form edit-dialog">
    <el-form
      :model="state.formData"
      :rules="state.rules"
      ref="editFormRef"
      label-width="100px"
      v-loading="loading"
    >
      <el-descriptions
        :column="2"
        border
        :colon="true"
        label-class-name="custom-description-label-160"
      >
        <el-descriptions-item>
          <template #label>
            <span class="colorRed">*</span>
            审核结果
          </template>
          <el-form-item prop="approveResult">
            <pubDictRadio
              v-model="state.formData.approveResult"
              :dict-code="props.resultType"
              @change="ChangeResult"
              type="String"
            />
          </el-form-item>
        </el-descriptions-item>
        <el-descriptions-item>
          <template #label>
            <span class="colorRed">*</span>
            审核时间
          </template>
          <el-form-item prop="approveTime">
            <el-date-picker
              v-model="state.formData.approveTime"
              format="YYYY-MM-DD HH:mm"
              value-format="YYYY-MM-DD HH:mm"
              style="width: 100%"
              type="datetime"
              placeholder="请选择"
            />
          </el-form-item>
        </el-descriptions-item>
        <el-descriptions-item :span="2">
          <template #label>
            <span class="colorRed">*</span>
            经办人
          </template>
          <el-form-item prop="approveUserName">
            <el-input
              type="text"
              v-model="state.formData.approveUserName"
              placeholder="请输入"
              clearable
              maxlength="50"
            ></el-input>
          </el-form-item>
        </el-descriptions-item>

        <el-descriptions-item :span="2">
          <template #label>
            <span class="colorRed">*</span>
            审核意见
          </template>
          <el-form-item prop="approveComment">
            <el-input
              type="textarea"
              maxlength="200"
              show-word-limit
              v-model="state.formData.approveComment"
              placeholder="请输入"
            ></el-input>
          </el-form-item>
        </el-descriptions-item>
        <el-descriptions-item :span="2">
          <template #label>
            <span class="colorRed" v-if="uploadFlag">*</span>
            {{ props.fileLabel }}
          </template>
          <div class="colorRed upload-hint">
            支持文件格式：jpg、jpeg、png、doc、docx、pdf；单个文件大小不能超过8M；最多上传10个文件
          </div>
          <el-form-item prop="approveFile" :rules="uploadFlag ? $formRules.upload : [{required:false}]">
            <pub-upload
              v-model:bizId="state.formData.approveFile"
              limit="10"
              :file-size="8"
            />
          </el-form-item>
        </el-descriptions-item>
      </el-descriptions>
      <div class="form-item-btn-group">
        <el-button class="btn-form-close" @click="close()">取消</el-button>
        <el-button
          class="btn-form-save"
          type="primary"
          :loading="btnLoading"
          v-prevent-repeat-click
          @click="submitForm(editFormRef)"
        >
          保存
        </el-button>
      </div>
    </el-form>
  </div>
</template>

<script setup>
import { ref, reactive, onBeforeMount, watch } from 'vue'
import { ElMessageBox, ElMessage } from 'element-plus'
import { useUserStore } from '@/pinia/modules/user'
import { getCurrentMinutes } from '@/utils/date.js'
import {
  Delete,
  Edit,
  Search,
  Share,
  Upload,
  Plus
} from '@element-plus/icons-vue'

const props = defineProps({
  bizType: {
    type: String
  },
  fileLabel: {
    type: String,
    default: '附件材料：'
  },
  resultType: {
    type: String,
    default: 'SHYJ'
  },
  timeFormat: {
    type: String,
    default: 'datetime'
  },
  defaultApproveResult: {
    type: String,
    default: ''
  },
  uploadFlag: {
    type: Boolean,
    default: false
  }
})
const userStore = useUserStore()
const userInfo = userStore.userInfo
let loading = ref(false)
let btnLoading = ref(false)
const state = reactive({
  fileList: [{ bizType: props.bizType, fileIds: '' }],
  formData: {
    approveResult: props.defaultApproveResult,
    approveUserName: '',
    approveTime: ''
  },
  rules: {
    approveResult: [
      {
        required: true,
        message: '请选择',
        trigger: 'change'
      }
    ],
    approveUserName: [
      {
        required: true,
        message: '请输入',
        trigger: 'blur'
      }
    ],
    approveTime: [
      {
        required: true,
        message: '请选择',
        trigger: 'change'
      }
    ],
    approveComment: [
      {
        required: true,
        message: '请输入',
        trigger: 'blur'
      }
    ],
    approveFile: [
      {
        required: props.uploadFlag,
        message: '请上传',
        trigger: ['blur','change']
      }
    ]
    
  }
})
const editFormRef = ref(null)
const emit = defineEmits(['close', 'approveSubmit', 'chageResult'])

const close = () => {
  emit('close')
}

const ChangeResult = (val) => {
  console.log(val)
  emit('chageResult', val)
}

const load = () => {
  loading.value = false
}
const submitForm = formEl => {
  if (!formEl) return
  formEl.validate(async valid => {
    if (valid) {
      btnLoading.value = true
      emit('approveSubmit', state.formData)
      // btnLoading.value = false
    }
  })
}

defineExpose({
  load
})
onBeforeMount(() => {
  state.formData.approveUserName = userInfo.realName
  state.formData.approveTime = getCurrentMinutes()
})
</script>
<style scoped></style>
